<template>
  <a-card :bordered="false">
    <a-form
      :form="form"
      :label-col="{ span: 3 }"
      :wrapper-col="{ span: 6 }"
      @submit="handleSubmit"
    >
      <h2 style="margin-bottom: 40px">
        代价模型影响因子设置
      </h2>
      <a-form-item :wrapper-col="{ span: 12, offset: 1 }">
        <a-checkbox-group v-decorator="[
            'checkedList',
            {
              initialValue: checkedList,
              rules: [
                {
                  required: true,
                  message: '请选择影响因子',
                },
              ],
            },
          ]">
          <a-row :gutter="[16, 40]">
            <a-col
              v-for="d in factors"
              :key="d.id"
              :span="24"
            >
              <a-checkbox :value="d.id"> {{ d.factorName }} </a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </a-form-item>
      <h2 style="margin-bottom: 40px">影响因子评分样本</h2>
      <a-form-item
        v-for="d in factors"
        v-show="form.getFieldValue('checkedList').includes(d.id)"
        :key="d.id"
        :label="d.factorName"
      >
        <a-input
          autocomplete="off"
          style="width: 125px"
          :max-length="6"
          :addon-after="d.unit ? (d.unit === 's' ? 'S' : d.unit) : ''"
          @keyup="clearNoNum(d.id)"
          @blur="clearNoNum(d.id)"
          v-decorator="[
            d.id,
            {
              initialValue: d.scoreSample,
              rules: [
                { required: true, message: '请输入' + d.factorName + '样本' },
                { validator: validators.xmax({max:999999}), trigger: 'change', },
                { validator: validators.xmin({min:0}), trigger: 'change', },
              ],
            }
          ]"
        />
        <!-- <a-input-number
          style="width: 55%;"
          :min="0"
          :max="99999"
          :parser="value => value ? (isNaN(value) ? 0 : parseInt(value)) : 0"
          v-decorator="[
            d.id,
            {
              initialValue: d.scoreSample,
              rules: [
                {
                  required: true,
                  message: '请输入' + d.factorName + '评分样本值',
                },
              ],
            },
          ]"
        />
        <div
          v-if="d.unit"
          class="rule-unit"
        >
          {{ d.unit }}
        </div> -->
        <!-- <span style="display: inline-block;padding-left: 10px">{{ d.unit }}</span> -->
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 7 }">
        <a-button
          :disabled="factors.length === 0"
          type="primary"
          html-type="submit"
        > 提交 </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
  import { gPostAction } from "@/api/manage";
  import { filterNoNum } from "@/utils/util";

  export default {
    name: "F020201",
    data() {
      return {
        formLayout: "horizontal",
        form: this.$form.createForm(this, { name: "coordinated" }),
        factors: [],
        checkedList: [],
      };
    },
    mounted() {
      this.loadData();
    },
    methods: {
      clearNoNum(fieldName) {
        let obj = {};
        obj[fieldName] = filterNoNum(this.form.getFieldValue(fieldName));
        this.form.setFieldsValue(obj);
        this.form.validateFields([fieldName], (errors, values) => {});
      },
      loadData() {
        gPostAction("/model/getModelFactors", { modelType: "COST", title: "离线业务多数据中心迁移-离线业务异步迁移代价-代价模型配置", content: "查看代价模型影响因子" }).then(
          (res) => {
            this.factors = res.data;
            this.factors.forEach((f) => {
              if (f.enabled) {
                this.checkedList.push(f.id);
              }
            });
          }
        );
      },
      // onChange(checkedValues) {
      //   console.log("checked = ", checkedValues);
      // },
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
            const postData = {};
            postData.modelType = "COST";
            postData.title = "离线业务多数据中心迁移-离线业务异步迁移代价-代价模型配置";
            postData.content = "代价模型影响因子设置";
            this.factors.forEach((item, i) => {
              postData["factors[" + i + "].id"] = item.id;
              postData["factors[" + i + "].scoreType"] = item.scoreType;
              postData["factors[" + i + "].factorName"] = item.factorName;
              postData["factors[" + i + "].weight"] = item.weight;
              if (values.checkedList.includes(item.id)) {
                postData["factors[" + i + "].scoreSample"] = values[item.id];
                postData["factors[" + i + "].enabled"] = true;
              } else {
                postData["factors[" + i + "].enabled"] = false;
                postData["factors[" + i + "].scoreSample"] = item.scoreSample;
              }
            });
            gPostAction("/model/setModelFactors", postData).then((res) => {
              if (res.success) {
                this.$message.success("操作成功");
              }
            });
          }
        });
      },
    },
  };
</script>
